<template>
    <div v-if="!readonly">
        <div v-if="type=='baidu'" >
            <baidu-map-view v-model="mapValue" :config="config" @ready="baiduReady" @click="click" :showSearch="showSearch" ></baidu-map-view>
        </div>
        <div v-else-if="type=='amap'">
            <amap-map-view v-model="mapValue" :config="config" @ready="amapReady" @click="click" :showSearch="showSearch"></amap-map-view>
        </div>
    </div>
    <div v-else>
        <!-- display 自定义只读 -->
        <slot name="display" :value="mapValue" :mapType="mapType" >
            <a-row style="margin-bottom: 10px;">
                <span>{{i18n('address','地址')}}：</span>
                <span>{{mapValue?JSON.parse(mapValue).address:""}}</span>
            </a-row>
            <a-row style="margin-bottom: 10px;">
                <span>{{i18n('coordinates','坐标')}}：</span>
                <span>{{mapValue?JSON.parse(mapValue).longitude:""}},{{mapValue?JSON.parse(mapValue).latitude:""}}</span>
            </a-row>
        </slot>
        <div v-if="(showMap && $slots.display) || !$slots.display && mobileApp">
            <div v-if="type=='baidu'" >
                <baidu-map-view v-model="mapValue" :config="config" @ready="baiduReady"  :showSearch="false" :readonly="true"></baidu-map-view>
            </div>
            <div v-else-if="type=='amap'">
                <amap-map-view v-model="mapValue" :config="config" @ready="amapReady" :showSearch="false" :readonly="true"></amap-map-view>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 地图控件
 */
// #ifdef H5
import BaiduMapView  from "./BaiduMapView.vue";
import AmapMapView  from "./AmapMapView.vue";
// #endif
export default {
    name: "rx-vue-map",
    emits:["valueChange","update:modelValue","ready","click"],
    // #ifdef H5
    components: {BaiduMapView,AmapMapView},
    // #endif
    props: {
        //控件值
        modelValue:{},
        //是否只读
        readonly: {
            type:Boolean,
            default: false
        },
        //只读时插槽是否展示地图
        showMap: {
            type:Boolean,
            default: false
        },
        //是否搜索
        showSearch: {
            type:Boolean,
            default: false
        },
        type:{
            //baidu(百度) amap(高德)
            type:String,
            default:"baidu"
        },
        //配置
        config:{}
    },
    data() {
        return {
            //地址值 '{longitude:"经度", latitude:"维度",address:"地址"}'
            mapValue:"",
            mapType:"baidu",
            mobileApp:false
        }
    },
    created() {
        // #ifdef H5
        this.mobileApp = true
        // #endif
        if(this.modelValue){
            this.mapValue=this.modelValue;
        }
        this.mapType=this.type;
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "mapLang", key);
        },
        //当百度地图所有图块完成加载时触发此事件 参数 BMap类和map实例
        baiduReady(BMap,map){
            this.$emit("ready",BMap,map);
        },
        //当高德地图所有图块完成加载时触发此事件 参数 BMap类和map实例
        amapReady(map){
            this.$emit("ready",map);
        },
        //点击地图触发事件
        click(e){
            this.$emit("click",e);
        }
    },
    watch: {
        mapValue:function (val){
            this.$emit("update:modelValue",val);
            this.$emit('valueChange',val);
        },
        modelValue:function (val){
            this.mapValue=val;
        }
    },
}
</script>

<style scoped>

</style>
